<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询资产 - AssetVerify</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1E1E20',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 12px 0 rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 4px 20px 0 rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/95 shadow-sm">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="flex items-center">
                        <div class="bg-primary text-white p-2 rounded-lg mr-2">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-neutral-700">AssetVerify</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">首页</a>
                    <a href="create.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">创建资产</a>
                    <a href="register.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">资产上链</a>
                    <a href="query.html" class="text-primary font-medium border-b-2 border-primary pb-1">查询资产</a>
                    <a href="transfer.html" class="text-neutral-600 hover:text-primary transition-custom font-medium">转移资产</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="menu-toggle" class="text-neutral-600 hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-neutral-200">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">首页</a>
                <a href="create.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">创建资产</a>
                <a href="register.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">资产上链</a>
                <a href="query.html" class="block px-3 py-2 rounded-md text-base font-medium text-primary bg-primary/5">查询资产</a>
                <a href="transfer.html" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/5 hover:text-primary">转移资产</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow pt-24 pb-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-neutral-700">查询资产</h1>
                <p class="mt-4 text-neutral-500 max-w-2xl mx-auto">
                    通过资产ID或所有者信息查询资产的详细信息和上链状态。
                </p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="bg-white rounded-xl shadow-card p-8 border border-neutral-200 mb-12">
                    <h2 class="text-xl font-semibold text-neutral-700 mb-6">资产查询</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="md:col-span-2">
                            <label for="query-input" class="block text-sm font-medium text-neutral-700 mb-1">资产ID或所有者</label>
                            <input type="text" id="query-input" name="query-input" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="请输入资产ID或所有者名称">
                        </div>
                        
                        <div class="flex items-end">
                            <button id="search-button" type="button" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-lg transition-custom font-medium flex items-center justify-center">
                                <i class="fa fa-search mr-2"></i> 查询资产
                            </button>
                        </div>
                    </div>
                    
                    <div class="mt-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-neutral-700">查询条件</h3>
                            <button type="button" class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
                                <i class="fa fa-filter mr-1"></i> 高级筛选
                            </button>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label for="asset-type-filter" class="block text-sm font-medium text-neutral-500 mb-1">资产类型</